<template>
  <div class="stepper">
    <van-icon
      name="minus"
      size="15"
      color="#1989fa"
      @click="minusJitemCartNum(choosenItem)"
    />
    <span class="cartnum">{{ cartStore.getGoodNum(props.choosenItem) }}</span>
    <van-icon
      name="plus"
      size="15"
      color="#1989fa"
      @click="addJitemCartNum(choosenItem)"
    />
  </div>
</template>
<script setup lang="ts">
import { good } from "@/utils/interface";
import { usecartStore } from "@/store/modules/module.js";

const cartStore = usecartStore();

interface Props {
  choosenItem: good;
}
const props = defineProps<Props>();
// 增加当前单品的数量并加入购物车
const addJitemCartNum = (item: good) => {
  cartStore.addCartNum(item);
};

// 减少当前单品的数量
const minusJitemCartNum = (item: good) => {
  // 如果已经是0了，拒绝这次减少，直接返回空
  if (cartStore.getGoodNum(props.choosenItem) == 0) return;
  cartStore.minusCartNum(item);
};
</script>
<style lang="less" scoped>
.stepper {
  align-items: center;
  van-icon {
    align-items: center;
  }
  .cartnum {
    font-size: 4vw;
    padding-left: 1vw;
    padding-right: 1vw;
  }
}
</style>
